<template>
<div class="manageBase" v-if="ifShow">

<!--  头部区域-->
  <el-button type="success" class="addmargin" @click="dialogCreat=true">创建群组</el-button>

  选择你的群组 : <el-select v-model="choosevalue" placeholder="请选择" @change="groupChange">
  <el-option
      v-for="item in grades"
      :key="item"
      :label="item"
      :value="item"
  >
  </el-option>
</el-select>

<!--  主要内容区-->
  <el-tabs v-model="nowActivename" class="maintable" style="width: 80%">
    <el-tab-pane label="打卡系统设置" name="first" style="width: 400px">
      <div>
        <el-button @click="dialogSettingTime=true;getDKtime()">打卡时长设置</el-button>
        <el-alert
            title="当前打卡时长设置"
            type="success"
            :closable="false"
            style="margin: 8px">
          “分年级设置不同的打卡时长“
        </el-alert>
        <el-button @click="$message.error('功能尚未完善')">打卡方式设置</el-button>
        <el-alert
            title="当前打卡方式设置"
            type="warning"
            :closable="false"
        style="margin: 8px">
          “定位”打卡，”wifi“打卡
        </el-alert>
      </div>
    </el-tab-pane>
    <el-tab-pane label="群成员管理" name="second">
<!--      群成员信息表格-->
      <div>
       <el-table
           :data="menberDate"
           @expand-change="showEcharts"
           stripe>
<!--         详细图表-->
         <el-table-column type="expand" v-slot="slot">
           <el-button @click="showEcharts(slot.row)">点我刷新</el-button>
          <div ref="myechart" class="EC"></div>
         </el-table-column>
        <el-table-column prop="nickname" label="姓名" width="150%" ></el-table-column>
        <el-table-column prop="grade" label="年级" width="150%" ></el-table-column>
        <el-table-column label="权限" v-slot="slot" width="150%">
          <el-tag type="success" v-if="slot.row.role=='1'">成员</el-tag>
          <el-tag type="warning" v-if="slot.row.role=='2'">管理员</el-tag>
          <el-tag type="danger" v-if="slot.row.role=='3'">超级管理员</el-tag>
        </el-table-column>
        <el-table-column label="状态" width="150%" v-slot="slot">
          <el-switch
              v-model="slot.row.status"
              active-value="1"
              inactive-value="0"
              @change="stateChange(slot.row)"
              :disabled='mydata.role=="1"?true:false'></el-switch>
        </el-table-column>
        <el-table-column label="操作" width="250%x" v-slot="slot">
<!--          删除-->
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteUser(slot.row)"></el-button>
<!--          设置-->
          <el-tooltip effect="dark" content="管理用户权限" placement="top">
            <el-button type="warning" icon="el-icon-setting" size="mini" @click="dialogSettingPower=true;user=slot.row"></el-button>
          </el-tooltip>
        </el-table-column>
      </el-table>
        <!--        添加新成员按钮-->
        <el-button type="primary" class="addmargin" @click="dialogAddmenber=true">添加新成员</el-button>
        <el-button type="primary" class="addmargin" @click="offDK">一键下卡</el-button>
      </div>
    </el-tab-pane>
    <el-tab-pane label="消息通知" name="third">
<!--     消息通知界面-->
      <div>
        <quill-editor v-model="textarea" style="height: 200px"></quill-editor>
        <div style="margin-top: 95px">
          <el-button @click="oneGetMsg" type="primary" style="">一键发送当前周打卡报告</el-button>
          <el-button @click="sendMsg" type="success" style="margin-left:70%">发送</el-button>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>

<!--  对话框弹出区域-->
  <!--  创建群组-->
  <div>
    <el-dialog
    title="创建群组"
    :visible.sync="dialogCreat"
    width="30%">
      <el-form :model="createForm">
        <el-form-item label="群组名称:" label-width="100px">
          <el-input v-model="createForm.groupname"></el-input>
        </el-form-item>
<!--        <el-form-item label="群组密码:" label-width="100px">-->
<!--          <el-input v-model="createForm.id"></el-input>-->
<!--        </el-form-item>-->
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogCreat = false">取 消</el-button>
      <el-button type="primary" @click="createGroup">确 定</el-button>
        </span>
    </el-dialog>
  </div>
  <!--  群角色设置-->
  <div>
    <el-dialog
    title="群角色设置"
    :visible.sync="dialogRole"
    width="30%">

    </el-dialog>
  </div>
  <!--  打卡时长设置-->
  <div>
    <el-dialog
        title="设置打卡时长"
        :visible.sync="dialogSettingTime"
        width="40%">
      <div>
<!--        <p class="addmargin" style="margin-top: 5px">选择打卡周期:</p>-->
<!--        <el-radio v-model="DKzhouqi" label="1" class="addmargin" style="margin-top: 10px">周</el-radio>-->
<!--        <el-radio v-model="DKzhouqi" label="2" class="addmargin" style="margin-top: 10px">月</el-radio>-->
        大一打卡：<el-slider max="40" v-model="DKtime[0].goaltime" class="addmargin"></el-slider> <el-button @click="setDK1" type="warning" icon="el-icon-setting" circle style="position: absolute;top:20%;right:5%"></el-button><br>
        大二打卡：<el-slider max="40" v-model="DKtime[2].goaltime" class="addmargin"></el-slider> <el-button @click="setDK2" type="warning" icon="el-icon-setting" circle style="position: absolute;top:42%;right:5%"></el-button><br>
        大三打卡：<el-slider max="40" v-model="DKtime[1].goaltime" class="addmargin"></el-slider> <el-button @click="setDK3" type="warning" icon="el-icon-setting" circle style="position: absolute;top:64%;right:5%"></el-button><br>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogSettingTime = false">取 消</el-button>
    <el-button type="primary" @click="dialogSettingTime = false">关闭</el-button>
  </span>
    </el-dialog>
  </div>
  <!--  打卡方式设置-->
  <div>
    <el-dialog
    title="打卡方式设置"
    :visible.sync="dialogSettingMethod"
    width="40%">
      <p class="addmargin" style="margin-top: 10px">选择打卡方式</p>
      <el-checkbox-group v-model="DKmethod">
        <el-checkbox label="位置打卡" class="addmargin" style="margin-top: 10px"></el-checkbox>
        <el-checkbox label="wifi打卡" class="addmargin" style="margin-top: 10px"></el-checkbox>
      </el-checkbox-group>
      <p class="addmargin" style="margin-top: 10px">定位/绑定wifi</p>
      <el-button class="addmargin" style="margin-top: 10px">点击获取当前定位/wifi</el-button>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogSettingMethod = false">取 消</el-button>
      <el-button type="primary" @click="dialogSettingMethod = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
  <!--  添加新成员-->
  <div>
    <el-dialog
    title="添加新成员"
    :visible.sync="dialogAddmenber"
    width="40%">
      搜索群成员名称： <el-input v-model="addMenberName" style="width: 60%"></el-input>

      <div style="display:flex;justify-content: space-between;padding-top:30px">
        <el-button @click="dialogAddmenber = false">取消</el-button>
        <el-button type="primary" @click="addmenber">确 定</el-button>
      </div>
    </el-dialog>
  </div>
  <!--  设置权限-->
  <div>
    <el-dialog
    title="设置权限"
    :visible.sync="dialogSettingPower"
    width="20%"
    >
      <el-select v-model="power" style="width: 100%" placeholder="选择用户权限">
        <el-option
        v-for="item in allPower"
        :label="item.value"
        :value="item.data"
        ></el-option>
      </el-select>
      <div style="display:flex;justify-content: space-between;padding-top:30px">
      <el-button @click="dialogSettingPower = false">取消</el-button>
      <el-button type="primary" @click="settingPower">确 定</el-button>
      </div>
    </el-dialog>
  </div>
  <!--  设置角色-->
</div>

</template>

<script>
import * as echarts from 'echarts'
export default {
  name: "manage",
  data(){
    return{
      //显示整个界面
      ifShow:false,
      //个人信息
      mydata:{
        nickname: "",
        role: 0,
        username: "",},
      //成员信息
      menberDate:[
        {name:'',grade:'',state:'',role:'0'},
      ],
      //群组信息
      grades:[],
      //选择群组
      choosevalue:'',
      //所有消息情况
      activities:[
        {message:'有新成员申请加入',timestamp:'2022-04-02'},
        {message:'有新成员申请加入',timestamp:'2022-04-02'},
      ],
      //当先高亮
      nowActivename:'second',
      // 选择的打卡方式
      checklist:['位置定位打卡'],
      //打卡周期
      DKzhouqi:'1',
      //创建群组对话框
      dialogCreat:false,
      //设置群角色对话框
      dialogRole:false,
      //打卡时长对话框
      dialogSettingTime:false,
      //打卡方式对话框
      dialogSettingMethod:false,
      //添加新成员对话框
      dialogAddmenber:false,
      //设置用户权限对话框
      dialogSettingPower:false,
      //设置用户角色对话框
      // dialogSettingPower:false,
      //步骤条激活状态
      activeStep:'1',
      //当前选中的角色信息
      user:{},
      //打卡时长设置
      DKtime:[
        {goaltime:0},
        {goaltime:0},
        {goaltime:0}
      ],
      //选择打卡方式
      DKmethod:['位置打卡'],
      //创建群组信息
      createForm:{
        groupname:'',
      },
      //添加新成员的名称
      addMenberName:'',
      //发送的消息
      textarea:``,
      //选择的用户权限
      power:'',
      //一共的用户权限
      allPower:[
        {value:'用户',data:'1'},
        {value:'管理员',data:'2'},
      ]
    }
  },
  methods:{
    //获取成员信息
    getmenberdata(){
      this.axios.post('/group/selectGroupalltime',{},{params:{groupname:this.choosevalue}}).then(res=>{
        this.menberDate=res.data
        for(var i=0;i<this.menberDate.length;i++){
          if(this.menberDate[i].nickname=='陈洛'){
            this.menberDate[i].status='0'
            return
          }
        }
      })
    },
    //获得个人信息
    getmyself(){
      this.axios.post('/group/getself',{},{
        params:{
          groupname:this.choosevalue
        }
      }).then(res=>{
        if(res.data.code===200){
          this.mydata=res.data.data
          // console.log("33333333333333")
          // console.log(res)
        }
        // console.log("33333333333333")
        // console.log(this.mydata)
      }).catch(res=>{
        // console.log(res)
      })
    },
    //获取打卡时长
    getDKtime(){
      this.axios.post('/group/getGradeAllTimes',{},{
        params:{
          groupname:this.choosevalue,
        }
      }).then(res=>{
        this.DKtime=res.data.data
        console.log("打卡时长")
        console.log(res)
      })
    },
    //设置打卡时长
    setDK1(){
      this.axios.post('/group/updategoaltime',{},{
        params:this.DKtime[0]
      }).then(res=>{
        if(res.data.code===200){
          this.$message.success("修改大一的打卡时间成功")
          this.getDKtime()
        }
        else{
          this.$message.warning("修改大一的打卡时间失败")
        }
      })
    },
    setDK2(){
      this.axios.post('/group/updategoaltime',{},{
        params:this.DKtime[2]
      }).then(res=>{
        if(res.data.code===200){
          this.$message.success("修改大二的打卡时间成功")
          this.getDKtime()
        }
        else{
          this.$message.warning("修改大二的打卡时间失败")
        }
      })
    },
    setDK3(){
      this.axios.post('/group/updategoaltime',{},{
        params:this.DKtime[1]
      }).then(res=>{
        if(res.data.code===200){
          this.$message.success("修改大三的打卡时间成功")
          this.getDKtime()
        }
        else{
          this.$message.warning("修改大三的打卡时间失败")
        }
      })
    },
    //选中的群组发生了改变
    groupChange(){
      // console.log("321")
      this.getmenberdata()
      this.$message.success('切换群组成功')
    },
    //更改当前学生状态
    stateChange(data){
      this.axios.post('/group/uponeclick',{},{
        params:{
          groupname:this.choosevalue,
          username:data.username
        }
      }).then(res=>{
        if(res.data.code===200){
          this.$message.success("更改成功")
        }
      })
    },
    //一键获取当前周打卡数据
    oneGetMsg(){
      if(this.mydata.role==1) {
        this.$message.error("仅限管理员可用")
        return
      }
      this.axios.post('/group/sendLastweekTime',{},{params:{groupname:this.choosevalue}}).then(res=>{
        if(res.data.code===200){
          this.$message.success('消息发布成功')
        }
      })
    },
    //发送群公告
    sendMsg(){
        this.axios.post('/group/releaseAnnounce',{},{params:{
            content:this.textarea,
            groupname:this.choosevalue
          }}).then(res=>{
            console.log("this.textarea")
            console.log(this.textarea)
            if(res.data.code===200){
              this.$message.success('消息发布成功')
            }
        })
    },

    //展开详细打卡信息
    showEcharts(row){
      this.$nextTick(()=>{
        var myechart=this.$refs.myechart
          var myChart = echarts.init(myechart)
          var option2={
            //设置标题
            title:{
              text: row.nickname+'的本周打卡时长',
              subtext: '共打卡'+row.weektime.toFixed(2)+'小时',
              left: 'center'
            },
            //鼠标移到点上可以显示具体数据
            tooltip: {
              trigger: 'item'
            },
            xAxis:{
              type: 'category',
              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
            },
            yAxis: {
              type: 'value',
            },
            series: [
              {
                data: [row.dayone, row.daytwo, row.daythree, row.dayfour, row.dayfive, row.daysix, row.dayseven],
                type: 'line',
                areaStyle:{},
                smooth: true
              }
            ]
          }
          myChart.setOption(option2)
      })
    },
    //删除用户
    deleteUser(row){
      this.$confirm('确认删除该用户?','提示',{
        confirmButtonText:'确认',
        cancelButtonText:'取消',
        type:'warning'
      }).then(()=>{
        this.axios.post('/group/deleteUser',{},{
          params:{
            groupname:this.choosevalue,
            username:row.username
          }
        }).then(res=>{
          if(res.data.code===200){
            this.$message.success('删除成功')
            this.getmenberdata()
          }
          else{
            this.$message.warning('删除失败')
          }
        })
      }).catch(()=>{
        this.$message.info('取消操作')
      })
    },
    //确认创建群组
    createGroup(){
      // console.log(this.createForm.groupname)
      this.axios.post('/group/create',{},{params:{groupname:this.createForm.groupname}}).then(res=>{
        // console.log(res)
      })
      this.dialogCreat=false;

    },
    //添加新成员
    addmenber(){
      this.axios.post('/group/memjoin',{},{
        params:{
          groupname:this.choosevalue,
          username:this.addMenberName
        }
      }).then(res=>{
        // console.log(res)
        if(res.data.code===200){
          this.$message.success('添加成员成功')
          this.getmenberdata()
        }
        else{
          this.$message.warning('添加成员失败')
        }
      })
      this.dialogAddmenber=false
    },
    //设置用户权限
    settingPower(){
      // console.log(this.user)
      this.axios.post('/group/updaterole',{},{
        params:{
          groupname:this.choosevalue,
          username:this.user.username
        }
      }).then(res=>{
        if(res.data.code===200){
          this.$message.success('更新权限成功')
          this.getmenberdata()
        }
        else{
          this.$message.warning('更新权限失败')
        }
      })
      this.dialogSettingPower=false
    },
    //一键下卡
    offDK(){
      this.$confirm('确定全部下卡？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        this.axios.post('/group/downallclick',{},{
          params:{
            groupname:this.choosevalue
          }
        }).then(res=>{
          console.log('一键下卡')
          console.log(res)
          if(res.data.code==200){
            this.$message.success("全部下卡成功")
            this.getmenberdata()
          }
          else{
            this.$message.error("全部下卡失败")
          }
        })
      })
    }
  },
  mounted() {
    this.getmyself()

    // 获取当前人员管理群信息
    this.axios.post('/group/selectGroup').then(res=>{
      // console.log(res)
      // console.log("1111111111111111111111111111111")
      this.grades=res.data.data
      // 这个才是完全出版体
      // console.log(this.grades)
      this.choosevalue=this.grades[0]
      this.getmenberdata()
      this.getmyself()
      this.ifShow=true
    })
  },
}
</script>

<style scoped>
.manageBase{
  /*overflow: scroll;*/
  height:100% !important;
}
.maintable{
  /*position: absolute;*/
  margin:20px
}
.addmargin{
  margin: 20px;
}
.EC{
  position: relative;
  z-index: 2;
  width: 900px;
  height: 400px;
}
el-slider{
  width: 80% !important;
}
</style>